<script setup>
import { ref, reactive } from "vue";

defineProps({
  msg: String,
});


</script>

<template>

  <div id="olMap">
    <div class="header"></div>
    <van-dialog  v-model:show="isshow" width="80%" @confirm="isshow=false" @cancel="isshow=false" title="视频" show-cancel-button>
        <vue3VideoPlay 
        width="100%"
        title="冰河世纪"
        crossOrigin="Anonymous"
        :src="options.src"
        :type="options.type"
        :autoPlay="true"
       /> 
       <!-- <ck-player :sourceUrl="sourceUrl"  @playStatus= "changePlayStatus"></ck-player>-->
       <!-- <div class="video active" style="width: 300px;height: 300px" id="ckplayera"></div> -->
    </van-dialog>
    <!-- <div  id="dplayer">
        <vue3VideoPlay 
        width="800px"
        title="冰河世纪"
        :src="options.src"
        :type="options.type"
        :autoPlay="true"
       />
    </div> -->

    <!-- 顶部导航 -->
    <div class="topNav">
      <div @click="homeClick"><i class="iconfont icon-shouye" :class="{ current: homeFlag == true }"/></div>
      <div @click="imgClick"><i class="iconfont icon-tupian" :class="{ current: imgFlag == true }"/></div>
      <div @click="searchClick"><i class="iconfont icon-wxbsousuotuiguang" :class="{ current: searchFlag == true }"/></div>
      <div @click="safeClick"><i class="iconfont icon-alarm-full" :class="{ current: safeFlag == true }"/></div>
      <div @click="cameraClick"><i class="iconfont icon-bayonet-camera-full" :class="{ current: cameraFlag == true }"/></div>
    </div>

    <!-- 右上导航 -->
    <div class="topR">
      <div @click="layerClick"><i class="iconfont icon-tuceng" :class="{ current: layerFlag == true }"/></div>
      <div @click="navigationClick"><i class="iconfont icon-daohang" :class="{ current: navigationFlag == true }"/></div>
    </div>

    <!-- 右下导航 -->
    <div class="bottomR">
      <div @click="locationClick"><i class="iconfont icon-dingwei"/></div>
      <div @click="enlargeHandle"><i class="iconfont icon-jiajianzujianjiahao"/></div>
      <div @click="lessenHandle"><i class="iconfont icon-jianhao2"/></div>
    </div>

    <!-- 图层弹出层 -->
    <div class="layerPop">
      <van-popup v-model:show="layerShow" position="right" @click-overlay="closeLayerPop" :style="{ height: 'calc(100% - 70px)',width:'45%' }">
        <!-- 基础底图 -->
        <div class="baseLayer">
          <div class="title">
            <div class="line"></div>
            <span>基础底图</span>
          </div>
          <div class="layers">
            <div class="item" @click="VectorClick" v-for="item in layerList" :key="item.id">
              <div :class="{layerCurrent:VectorFlag == true}">
                <img :src="item.service.image" alt="">
                <div v-show="VectorFlag" class="cur" >
                  <i class="iconfont icon-duigou"/>
                </div>
              </div>
              <span :class="{ current:VectorFlag == true }">{{item.title}}</span>
            </div>
           
          </div>
        </div>
        <!-- 分割 -->
        <div class="split"></div>
        <!-- 我的图层 -->
        <div class="myLayer">
          <div class="title">
            <div class="line"></div>
            <span>我的图层</span>
          </div>
          <div class="layers">
            <div class="item">
              <div>
                <img src="../assets/layerimg.jpg" alt="">
              </div>
              <span>我的收藏</span>
            </div>
            <div class="item">
              <div>
                <img src="../assets/layerimg.jpg" alt="" >
              </div>
              <span>我的标注</span>
            </div>
          </div>
        </div>
        <!-- 分割 -->
        <div class="split"></div>
        <!-- 专题图 -->
        <div class="specialLayer">
          <div class="title">
            <div class="line"></div>
            <span>专题图</span>
          </div>
          <van-collapse v-model="activeName" accordion @change="collapseChange">
            <van-collapse-item title="规划用地专题图" name="1">
              <div class="specialItem" v-for="item in specialArr" :key="item.id">
                {{item.name}}
                <div class="del">
                    <i class="iconfont icon-chahao"/>
                </div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="规划用地专题图" name="2">
              <div class="specialItem" v-for="item in specialArr" :key="item.id">
                {{item.name}}
                <div class="del">
                    <i class="iconfont icon-chahao"/>
                </div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="国有农业牧场分布图" name="3">
              <div class="specialItem" v-for="item in specialArr" :key="item.id">
                {{item.name}}
                <div class="del">
                    <i class="iconfont icon-chahao"/>
                </div>
              </div>
            </van-collapse-item>
        </van-collapse>
        </div>

      </van-popup>
    </div>

    <!-- 专题图集弹出层 -->
    <div class="spacialPop">
      <van-popup v-model:show="imgDialog" :overlay='false' @close="imgFlag = false">
            <div class="title">
              <span>专题图集</span>
              <i class="iconfont icon-chahao" @click="imgDialog = false"/>
            </div>
            <div class="container">
              <div class="left">
                <div class="item" v-for="item in spacialTitleArr" :key='item.id' :class="{active:spacialIndex == item.id}" @click="spacialTitleClick(item.id)">{{item.name}}</div>
              </div>
              <div class="right">
                <div v-show="spacialIndex == 1">
                  <div class="item" v-for="item in spacialItemArr" :key="item.id" :class="{currentItem:item.flag == true}" @click="spacialItemClick(item.id)">{{item.title}}</div>
                </div>
                <div v-show="spacialIndex == 2">
                  <div class="item" v-for="item in spacialItemArr" :key="item.id" :class="{currentItem:item.flag == true}" @click="spacialItemClick(item.id)">{{item.title}}</div>
                </div>
              </div>
            </div>
          </van-popup>
    </div>

    <!-- 网络监控 -->
    <div class="safePop" v-show="safeShow">
      <!-- <van-popup v-model:show="safeShow" :overlay='false'> -->
        <van-checkbox v-for="item in checkBoxArr" :key="item.id" v-model="item.isCheck" shape="square" icon-size="18px">{{item.label}}</van-checkbox>
      <!-- </van-popup> -->
    </div>

  </div>
</template>

<script>
/*
@sourceUrl:播放地址
@changePlayStatus：事件方法，根据视频播放状态，做进一步的判断
*/

import "ol/ol.css";
import Icon from "ol/style/Icon";
import { Fill, Stroke, Style, Text } from "ol/style";
import axios from "axios";
import OlMap from "../units/olMap";
import {planTree,getPlanInfo,getPlanLayers} from '@/api/dataServe.js'
let olMap;

export default {
  data() {
    return {
      sourceUrl:"rtsp://admin:mjsqj12345@60.165.100.44:545/Streaming/Channels/101",
      dplayer: null,
      isshow: false,
      options: {
        src: "/video/test.m3u8", //视频源
        type: "m3u8",
      },
      homeFlag:false,
      imgFlag:false,
      searchFlag:false,
      safeFlag:false,
      cameraFlag:false,
      layerFlag:false,
      navigationFlag:false,
      layerShow:false,
      VectorFlag:false,
      visionFlag:false,
      activeName:1,
      specialArr:[{name:'矿产资源勘查规划区块',id:1},{name:'探矿权范围',id:2}],
      imgDialog:false,
      active:0,
      spacialTitleArr:[{name:'政务专用图集',id:1},{name:'规划图集',id:2}],
      spacialIndex:1,
      spacialItemArr:[
        {title:'天水影像地图',id:0,flag:false},{title:'天水影像地图',id:1,flag:false},
        {title:'天水影像地图',id:2,flag:false},{title:'天水影像地图',id:3,flag:false},
        {title:'天水影像地图',id:4,flag:false},{title:'天水影像地图',id:5,flag:false},
        {title:'天水影像地图',id:6,flag:false},{title:'天水影像地图',id:7,flag:false},
        {title:'天水影像地图',id:8,flag:false},{title:'天水影像地图',id:9,flag:false},
      ],
      safeShow:false,
      checked:false,
      checkBoxArr:[
        {label:'秦州区社会面网络',isCheck:false,id:1},
        {label:'秦州区社会面网络',isCheck:false,id:2},
        {label:'秦州区社会面网络',isCheck:false,id:3},]
    };
  },
  mounted() {
    this.getLayerPlanid();
   
  },
  methods: {
      getLayerPlanid() {
      getPlanInfo({ id: 1 }).then((res) => {
        console.log(res);
        if (res.code == 0 && res.data.extendParam !== "") {
          this.mapBase = JSON.parse(res.data.extendParam);
          this.initMap(this.mapBase);
          this.getTreesPlan();
        }
      });
    },
    getTreesPlan() {
       getPlanLayers({pid:1}).then(res=>{
         console.log('treeData',res);
          this.layerList = res.records||[];
           this.layerList.forEach(item=>{
             if(item.baseMap){
               console.log(item);
               this.$nextTick(()=>{
                this.layerTreeChoose.push(item.id)
               })
               let serviceAddress = item.service.serviceAddress;
              olMap.addWmsTiledLayer(item.id, serviceAddress, 1);
             }
              let serviceAddress = item.service.serviceAddress+'&token='+localStorage.getItem('token')
              olMap.addWmsTiledLayer(item.id, serviceAddress, 1);
           })
         
        })
        planTree().then((res) => {
          console.log('图层列表数据',res);
          this.data = res.records
        });
    },
    initMap(obj) {
      olMap = new OlMap();
      window.globalMap = olMap
      let center = obj.center.split(",");
      center.forEach((item) => {
        item = parseFloat(item);
      });
      olMap.initMap(
        "olMap",
        obj.zbx,
        [
          parseFloat(obj.xmin),
          parseFloat(obj.ymin),
          parseFloat(obj.xmax),
          parseFloat(obj.ymax),
        ],
        obj.unit,
        center
      );
      let that=this
      olMap.mapClick(function (properties) {
        console.log(properties);
        if (properties.id) {
          that.$router.push({name:'detail',query:{id:properties.id,url:'/video/test.m3u8'}})
          // that.isshow = true;
          console.log(that,that.isshow);
        }
      });
      // olMap.addInteraction("Point");
      axios
        .get("shebei.json")
        .then((res) => {
          if (res.status == 200) {
            let lowerArr = res.data;
            console.log(lowerArr);
            var style = function (feature, resolution) {
              return new Style({
                image: new Icon({
                  src: "./lower.png",
                  anchor: [0.5, 17],
                  anchorXUnits: "fraction",
                  anchorYUnits: "pixels",
                  scale: 1
                }),
                text: new Text({
                  offsetX: 0,
                  offsetY: 46,
                  fill: new Fill({ color: "#666666" }),
                  stroke: new Stroke({ color: "#666666", width: 1 }),
                  text: feature.get('name') || '',
                  padding:[4,4,4,4],
                  placement:20,
                  backgroundFill:new Fill({ color: "#ffffff" }),
                  textAlign: "center",
                }),
              });
            };
            style.width = 16;
            style.height = 16;
            style.value = 90;
            style.text = "99";
            style.visible = true;
            olMap.addDynamicPointLayer(
              "lowerList",
              lowerArr,
              "longitude",
              "latitude",
              "id",
              {
                styles: [style],
                title: "水文站点",
                isIcon: true,
              }
            );
          }
        })
        .catch((error) => {
        });
    },
    // 首页点击
    homeClick() {
      this.homeFlag = !this.homeFlag
    },
    // 专题图集点击
    imgClick() {
      this.imgFlag = !this.imgFlag
      this.imgDialog = true
    },
    // 搜索点击
    searchClick() {
      this.searchFlag = !this.searchFlag
    },
    // 网络监控点击
    safeClick() {
      this.safeFlag = !this.safeFlag
      this.safeShow = !this.safeShow
    },
    // 视频/摄像点击
    cameraClick() {
      this.cameraFlag = !this.cameraFlag
    },
    // 图层管理点击
    layerClick() {
      this.layerShow = true
    },
    // 导航点击
    navigationClick() {
    },
    // 矢量图点击
    VectorClick() {
      this.VectorFlag = !this.VectorFlag
    },
    // 影像图点击
    visionClick() {
      this.visionFlag = !this.visionFlag
    },
    // 专题图集分类点击
    spacialTitleClick(id) {
      this.spacialIndex = id
    },
    // 专题图集子项点击
    spacialItemClick(id) {
      this.spacialItemArr[id].flag = !this.spacialItemArr[id].flag
    },
    // 图层管理折叠面板改变
    collapseChange(e) {
      console.log(e);
      this.activeName = e
    },
    // 图层管理关闭
    closeLayerPop() {
      this.layerShow = false
    },
    // 定位
    locationClick() {
      olMap.location([105.32413140901711, 34.8429766420764])
    },
    // 放大
    enlargeHandle() {
      olMap.enlarge(0.5)
    },
    lessenHandle() {
      olMap.lessen(0.5)
    },
  },
};
</script>

<style lang="scss" scoped>
#olMap {
  height: 100%;
  width: 100%;
  .header{
  background: url('@/assets/title.png') center  center;
  height: 70px;
  width: 100%;
  z-index: 1;
  position: absolute;
  box-shadow: 0 5px 5px #a7b0af;
  }
  .topNav {
    z-index: 9;
    position: absolute;
    top: 120px;
    left: 50px;
    width: 250px;
    height: 40px;
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #c5c5c5;
    div {
      flex: 1;
      text-align: center;
      line-height: 40px;
      i {
        font-size: 24px;
        color: #7f7f7f;
      }
    }
  }
  .topR {
    z-index: 9;
    position: absolute;
    top: 120px;
    right: 50px;
    width: 50px;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #c5c5c5;
    padding: 10px 0 10px 0;
    div {
      text-align: center;
      line-height: 40px;
      i {
        font-size: 24px;
        color: #7f7f7f;
      }
      i:active {
        color: #1991ff;
      }
    }
    div:nth-child(1) {
      width: 30px;
      margin: 0 auto;
      border-bottom: 1px solid #dcdcdc;
    }
  }
  .bottomR {
    z-index: 9;
    position: absolute;
    bottom: 80px;
    right: 50px;
    div {
      width: 45px;
      height: 45px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px #c5c5c5;
      margin-bottom: 10px;
      text-align: center;
      line-height: 45px;
      i {
        font-size: 24px;
        color: #7f7f7f;
      }
      i:active {
        color: #1991ff;
      }
    }
  }
  .current {
    color: #1991ff!important;
  }
  .baseLayer {
    width: 100%;
    // height: 120px;
    padding: 15px;
    .title {
      display: flex;
      align-items: center;
      .line {
        width: 3px;
        height: 15px;
        border-radius: 2px;
        background-color: #1892ff;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        font-weight: 900;
        color: #1892ff;
      }
    }
    .layerCurrent {
      border-radius: 20px;
      border: 1px solid #1892ff;
    }
    .layers {
      margin-top: 15px;
      display: flex;
      .item {
        flex: 1;
        div {
          position: relative;
          width: 60px;
          height: 60px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
          }
          .cur {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0;
            right: 0;
            width: 15px;
            height: 15px;
            border-radius: 7.5px;
            background-color: #128eff;
            i {
              font-size: 12px;
              color: #fff;
            }
          }
        }
        span {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color: #4d4d4d;
          }
      }
      
    }
  }
  .split {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
  }
  .myLayer {
    width: 100%;
    padding: 15px;
    .title {
      display: flex;
      align-items: center;
      .line {
        width: 3px;
        height: 15px;
        border-radius: 2px;
        background-color: #1892ff;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        font-weight: 900;
        color: #1892ff;
      }
    }
    .layers {
      margin-top: 15px;
      display: flex;
      .item {
        flex: 1;
        div {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
            border-radius: 25px;
            overflow: hidden;
          }
        }
        span {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color: #4d4d4d;
          }
      }
      
    }
  }
  .specialLayer {
    width: 100%;
    padding: 15px;
    .title {
      display: flex;
      align-items: center;
      .line {
        width: 3px;
        height: 15px;
        border-radius: 2px;
        background-color: #1892ff;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        font-weight: 900;
        color: #1892ff;
      }
    }
    .specialItem {
      position: relative;
      margin-bottom: 10px;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      background-color: #e0f1fb;
      border-radius: 5px;
      .del {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: -6px;
        width: 15px;
        height: 15px;
        background-color: #1c95ff;
        border-radius: 7.5px;
        i {
          font-size: 12px;
          color: #fff;
        }
      }
    }
    .specialItem:nth-child(2n+1) {
      margin-right: 20px;
    }
  }
  
}
</style>

<style lang="scss">
#olMap {
  .spacialPop {
    .van-popup--center {
      width: 450px;
      height: 350px;
      border-radius: 10px;
      .title {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        background-color: #178fff;
        color: #fff;
        padding: 0 10px;
        i {
          font-size: 22px;
        }
        i:active {
          color: #7f7f7f;
        }
      }
      .container {
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        .left {
          width: 30%;
          background-color: #f0f0f0;
          .item {
            height: 50px;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            border-bottom: 1px solid #dcdcdc;
          }
          div:nth-last-child(1){
            border-bottom: none!important;;
          }
        }
        .active {
          background-color: #fff;
        }
        .right {
          width: 70%;
          background-color: #fff;
          .currentItem {
            background-color: #1890ff!important;
            color: #fff!important;
          }
          div {
            display: flex;
            flex-wrap: wrap;
            margin: 10px;
            .item {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 125px;
              height: 35px;
              border: 1px solid #1591ff;
              color: #1e8ef2;
              font-weight: 600;
              border-radius: 5px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .safePop {
    z-index: 9;
    position: absolute;
    // .van-popup {
      top: 165px;
      left: 130px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 0px 0px 10px #c5c5c5;
      padding: 0 20px 10px;
      .van-checkbox {
        box-sizing: border-box;
        margin-top: 10px;
        font-size: 14px;
      }
    // }
  }

  .layerPop {
    .van-popup--right {
      top: 54% !important;
    }
  }

  .van-collapse-item {
    margin-left: 10px;
    .van-cell {
    padding-left: 0;
    padding-right: 0;
      .van-cell__title, .van-cell__value {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        font-size: 16px;
        color: #303030;
      }
    }
    .van-collapse-item__content {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
  }
    
}
</style>
